<template>
	<view>

		<gateway ref="gateway" :cur="PageCur" v-if="PageCur=='gateway'" @getquery="getquery" :key="commponent1Key">
		</gateway>
		<notice v-if="PageCur=='notice'" :key="commponent2Key"></notice>
		<order ref="order" v-if="PageCur=='order'" :key="commponent3Key"></order>
		<people v-if="PageCur=='people' && hackReset" :key="commponent4Key"></people>
		<!-- <view class="cu-bar tabbar bg-white shadow foot">
			<view :class="PageCur=='gateway'?'action text-green':'action text-gray'" @click="NavChange" data-cur="gateway">
				<view class='cuIcon-homefill'></view>首页
			</view>
			<view :class="PageCur=='profile'?'action text-green':'action text-gray'" @click="NavChange" data-cur="profile">
				<view class='cuIcon-profile'></view>公告
			</view>
			<view :class="PageCur=='profile'?'action text-green':'action text-gray'" @click="NavChange" data-cur="profile">
				<view class='cuIcon-profile'></view>订单
			</view>
			<view :class="PageCur=='people'?'action text-green':'action text-gray'" @click="NavChange" data-cur="people">
				<view class='cuIcon-people'></view>我的
			</view>
		</view> -->

		<view class="Footer">
			<view class="main" @click="NavChange('gateway')">
				<image class="image" referrerpolicy="no-referrer"
					:src="PageCur == 'gateway' ? '/static/home/128/homeC.png' : '/static/home/128/home.png' " />
				<text :class="['info2',PageCur == 'gateway' ? 'blue':'']">首页</text>
			</view>
			<!-- <view class="main" @click="NavChange('notice')">
				<image class="image" referrerpolicy="no-referrer"
					:src="PageCur == 'notice' ? '/static/home/128/gongC.png' : '/static/home/128/gong.png' " />
				<text :class="['info2',PageCur == 'notice' ? 'blue':'']">公告</text>
			</view> -->
			<view class="main" @click="NavChange('order')">
				<image class="image" referrerpolicy="no-referrer"
					:src="PageCur == 'order' ? '/static/home/128/dingC.png' : '/static/home/128/ding.png' " />
				<text :class="['info2',PageCur == 'order' ? 'blue':'']">订单</text>
			</view>
			<view class="main" @click="NavChange('people')">
				<image class="image" referrerpolicy="no-referrer"
					:src="PageCur == 'people' ? '/static/home/128/myC.png' : '/static/home/128/my.png' " />
				<text :class="['info2',PageCur == 'people' ? 'blue':'']">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hackReset: true,
				PageCur: 'gateway',
				commponent1Key: 0,
				commponent2Key: 0,
				commponent3Key: 0,
				commponent4Key: 0,
				navHeight: '',
				hightTop: 0,
				wmssjH: '',
			}
		},
		//在.js文件中监听下拉触底
		onReachBottom:function(){
			if(this.PageCur=='order'){
				if(!this.$refs.order.loadingType){
					this.$refs.order.apiorderpage()
				}
			}
		}, 
		onShow: function() {
			this.hackReset = false;
			this.$nextTick(() => {
				this.hackReset = true;
			})
		},

		onLoad: function() {
			this.PageCur = 'gateway'
				++this.commponent1Key
				++this.commponent2Key
				++this.commponent3Key
				++this.commponent4Key
		},
		onPullDownRefresh () {
		    //刷新初始化数据
			this.$refs.gateway.auctionlist()//列表
		    //关闭刷新动画
		    setTimeout(function () {
		        uni.stopPullDownRefresh() 
		    }, 1000)
		},
		methods: {
			getquery(wmssjH) {
				console.log('wmssjH', wmssjH)
				this.wmssjH = wmssjH
			},
			//滚动位置
			onPageScroll(e) {
				let that = this
				// console.log(that.navHeight + that.wmssjH, e.scrollTop)
				if (this.PageCur == 'gateway') {
					//判断你滑动的高度大于你元素距离顶部的高度值
					if (that.wmssjH < e.scrollTop) {
						//固定
						that.$refs.gateway.hightTop = 1
					} else {
						that.$refs.gateway.hightTop = 0
					}
				}

			},

			NavChange(PageCur) {
				console.log(PageCur, '1111111')
				this.PageCur = PageCur
			}

		}
	}
</script>

<style scoped lang="scss">
	.info2 {
		color: #cdcdcd;
		font-size: 11px;
	}

	.blue {
		color: #B81D22;
	}

	.Footer {
		background-color: white;
		height: 58px;
		margin-top: 1px;
		width: 100%;
		display: flex;
		box-shadow: 0 -0.5px 3px rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		z-index: 5;
	}

	.main {
		text-align: center;
		padding-top: 8px;
		display: flex;
		flex-direction: column;
		flex: 1;
		padding-bottom: 7px;
	}

	.main .image {
		width: 21px;
		height: 21px;
		display: block;
		margin: auto;
	}

	/* .main2 {
		width: 629rpx;
		height: 44rpx;
		flex-direction: row;
		display: flex;
		margin: 19rpx 0 0 61rpx;
	}
	
	.icon2 {
		width: 43rpx;
		height: 43rpx;
		margin-top: 1rpx;
	}
	
	.label3 {
		width: 42rpx;
		height: 44rpx;
		margin-left: 152rpx;
	}
	
	.label4 {
		width: 42rpx;
		height: 40rpx;
		margin: 2rpx 0 0 156rpx;
	}
	
	.label5 {
		width: 43rpx;
		height: 42rpx;
		margin: 1rpx 0 0 151rpx;
	}
	
	.main3 {
		width: 629rpx;
		height: 22rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 17rpx 0 23rpx 61rpx;
	}
	
	.info1 {
		width: 43rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		font-size: 22rpx;
		font-family: Adobe Heiti Std R;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		display: block;
	}
	
	.txt3 {
		width: 43rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		font-size: 22rpx;
		font-family: Adobe Heiti Std R;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		display: block;
	}
	
	.word6 {
		width: 43rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		font-size: 22rpx;
		font-family: Adobe Heiti Std R;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		display: block;
	}
	
	.info2 {
		width: 43rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		font-size: 22rpx;
		font-family: Adobe Heiti Std R;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		display: block;
	} */
</style>
